<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于css的下拉菜单</title>
    <style>
        body{
            margin:0px;
            background-color: burlywood;
        }
        /*清楚ul样式*/
        ul{
            list-style: none;
            padding-inline-start: 0px;
        }
        .nav > li{
            float: left;
            border-right: 2px white solid;
           /* height: 50px;*/
        }
        .nav > li:last-child{
            float: left;
            border-right: 2px white ;
            /* height: 50px;*/
        }
        .nav a{
            display: inline-block;
            text-decoration: none;
            width: 150px;
            /*height: 50px;*/
            text-align: center;
            color: white;
            background-color: darkgray;
            padding: 10px 0px;
        }

        .drop-down{
            // 暂时没有样式
        }

        .drop-down-content{
            /*隐藏菜单*/
           /* opacity:0;*/
            visibility:hidden;
        }

        .drop-down:hover .drop-down-content{
            /*opacity:1;*/
            visibility:inherit;
        }
        
        h3{
            clear: both;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li><a href="#">下拉菜单</a></li>
    <li class="drop-down"><a href="#">下拉菜单</a>
        <ul class="drop-down-content">
            <li><a href="#">二级子菜单1</a></li>
            <li><a href="#">二级子菜单2</a></li>
            <li><a href="#">二级子菜单3</a></li>
        </ul>
    </li>
    <li><a href="#">下拉菜单</a></li>
    <li><a href="#">下拉菜单</a></li>
    <li><a href="#">下拉菜单</a></li>
</ul>
<h3>其他内容</h3>
</body>
</html>